<template>
    <div>
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style=" width: 100%;  ">
                <div style="font-size:20px; justify=">
                    输液监测提示系统
                </div>

                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>王小虎</span>
                </el-header>
                <el-container>
                    <el-aside width="150px">
                        <el-menu>
                            <!-- 侧边导航栏 -->

                            <el-menu-item index="1">
                                <span slot="title">患者管理</span>
                            </el-menu-item>

                            <el-menu-item index="2">
                                <span slot="title">医嘱管理</span>
                            </el-menu-item>

                            <el-menu-item index="3">
                                <span slot="title">皮试管理</span>
                            </el-menu-item>

                            <el-menu-item index="4">
                                <span slot="title">输液核对</span>
                            </el-menu-item>

                            <el-menu-item index="5">
                                <span slot="title">输液监测</span>
                            </el-menu-item>

                            <el-menu-item index="6">
                                <span slot="title">输液单</span>
                            </el-menu-item>

                            <el-menu-item index="7">
                                <span slot="title">设备管理</span>
                            </el-menu-item>
                        </el-menu>




                    </el-aside>
                    <el-main>

                        <el-row>
                            <el-col :span="24">
                                <div class="grid-content bg-purple-dark">患者管理</div>
                            </el-col>
                        </el-row>
                        <!-- 表单 -->
                        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
                            <!-- 科室选择 -->
                            <el-form-item label="药房科室">
                                <el-select v-model="formInline.region" placeholder="请选择科室">
                                    <el-option label="妇科" value="male"></el-option>
                                    <el-option label="儿科" value="child"></el-option>
                                    <el-option label="神经内科" value="shn"></el-option>
                                    <el-option label="神经外科" value="shw"></el-option>
                                    <el-option label="肛肠外科" value="gw"></el-option>
                                    <el-option label="呼吸内科" value="hxn"></el-option>
                                </el-select>
                            </el-form-item>

                            <!-- 就诊日期 -->
                            <el-form-item label="就诊日期">
                                <el-col :span="8">
                                    <el-form-item prop="date1">
                                        <el-date-picker type="date" placeholder="选择日期"
                                            v-model="ruleForm.date1"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <!-- 登记号 -->
                            <el-form-item label="登记号">
                                <el-input v-model="formInline.regis" placeholder="请输入"></el-input>
                            </el-form-item>

                            <el-form-item label="已审核">
                                <el-input v-model="formInline.sub" placeholder="请输入"></el-input>
                            </el-form-item>

                            <el-form-item label="干预系统">
                                <el-input v-model="formInline.sys" placeholder="请输入"></el-input>
                            </el-form-item>
                            <!-- 查询 -->
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>

                        </el-form>

                        <!-- 表格 -->
                        <el-table :data="tableData" style="width: 100%" height="250">
                            <el-table-column fixed prop="prescription" label="处方号" width="120">
                            </el-table-column>
                            <el-table-column prop="medicine" label="药品名" width="120">
                            </el-table-column>
                            <el-table-column prop="regis" label="登记号" width="120">
                            </el-table-column>
                            <el-table-column prop="name" label="患者名" width="120">
                            </el-table-column>
                            <el-table-column prop="diagnosis" label="诊断" width="120">
                            </el-table-column>
                            <el-table-column prop="data" label="日期" width="100">
                            </el-table-column>
                            <el-table-column prop="code" label="系统干预代码" width="150">
                            </el-table-column>
                            <el-table-column prop="cause" label="系统干预原因" width="150">
                            </el-table-column>
                            <el-table-column prop="remark" label="医生备注" width="120">
                            </el-table-column>
                            <el-table-column prop="text" label="人工干预内容" width="150">
                            </el-table-column>
                            <el-table-column prop="remarks" label="药师备注" width="120">
                            </el-table-column>
                        </el-table>

                    </el-main>
                </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formInline: {
                regis: '',
                region: '',
                sys: '',
                sub: '',
            },
            ruleForm: {
                data1: '',
            },
            rules: {
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        }
    }






}
</script>




<style>
.el-header {
    background-color: rgb(110, 189, 238)
}

.el-menu-item {
    background-color: rgb(10, 155, 222);

}

.title {
    text-align: center;
}

.bg-purple-dark {
    background: #3074d4;
    margin-bottom: 5px;
}
</style>